import React from 'react';
import Row from 'antd/lib/row';
import Col from 'antd/lib/col';
import { hashHistory } from 'react-router';

import aeroplane from '../images/aeroplane.png';
import pencil from '../images/pencil.png';

const styles = {
    panel: {
        backgroundColor:"#eee",
        padding:"1rem 0.5rem"
    },
    header: {
        backgroundColor:"rgb(17,169,162)",
        height:"3rem",
        color: "#fff",
        fontSize: "1.1rem",
        textAlign: "center",
        lineHeight: "3rem",
        borderTopLeftRadius: "5px",
        borderTopRightRadius: "5px"
    },
    articleInfo: {
        backgroundColor:"#fff",
        marginBottom: "0.3rem"
    },
    articleHeader: {
        padding: "0.5rem 0.5rem 0.2rem 0.5rem", 
        textAlign:"right",
        fontSize:"0.8rem"
    },
    articleDate: {
        float:"left"
    },
    articleReadAndComments: {
        color:"rgb(180,191,161)"
    },
    articleTitle: {
        padding: "0rem 0.5rem",
        fontSize: "1.2rem"
    },
    articleImg: {
        padding: "0rem 0.5rem",
        width:"100%",
        height:"7rem",
        position:"relative",
        backgroundSize: "calc( 100% - 1rem )",
        backgroundRepeat: "no-repeat",
        margin:"0.5rem"
    },
    articleOptionRight: {
        lineHeight: "2rem",
        textAlign: "center",
        border: "1px solid #e6e6e6",
        borderTop: "2px dotted #e6e6e6",
        borderBottom: "2px solid #fff",
        borderLeft: "1px solid #e6e6e6",
        borderRight: "2px solid #fff",
        fontSize: "1rem",
        color: "rgb(150,156,195)"
    },
    articleOptionLeft: {
        lineHeight: "2rem",
        textAlign: "center",
        border: "1px solid #e6e6e6",
        borderTop: "2px dotted #e6e6e6",
        borderBottom: "2px solid #fff",
        borderLeft: "2px solid #fff",
        borderRight: "1px solid #e6e6e6",
        fontSize: "1rem",
        color: "rgb(150,156,195)"
    },
    articleImgLeft: {
        width:"3rem",
        height:"3rem",
        backgroundSize: "3rem 3rem",
        backgroundRepeat: "no-repeat",
        float: "left",
        marginLeft: "0.5rem"
    },
    articleImgRight: {
        width:"3rem",
        height:"3rem",
        backgroundSize: "3rem 3rem",
        backgroundRepeat: "no-repeat",
        float: "right",
        marginRight: "0.5rem",
    }
}

export default class HotArticle extends React.Component {
    componentDidMount() {
        let height = 0;
        let width = 0;
        let _this = this;
        let fontWidth = 16;
        if(document.body.clientWidth < 360) {
            fontWidth = 16;
        } else if(document.body.clientWidth >= 360 && document.body.clientWidth < 414) {
            fontWidth = 16;
        } else if(document.body.clientWidth >= 414 && document.body.clientWidth < 720) {
            fontWidth = 18;
        } else {
            fontWidth = 20;
        }
        if (this.props.articles && this.props.articles.length > 0) {
            this.props.articles.forEach(function (item) {
                let tagNode = document.getElementById("article/" + item.ID);
                width = tagNode.offsetWidth;
                let fontSize = (width / fontWidth) * 4;
                let text = _this.cutString(tagNode.innerHTML, fontSize) ;
                if (text.length > 0)
                    tagNode.innerHTML = text + '...';
                else 
                    tagNode.innerHTML = text;
            });
        }
    }

    cutString(obj, maxLen) {
        var b = 0;
        var l = obj.length;
        let ret = obj;
        if (l) {
            for (var i = 0; i < l; i++) {
                if (obj.charCodeAt(i) > 255) {
                    b += 2;
                } else {
                    b++;
                }
                if (b > maxLen) {
                    ret = obj.substring(0, i);
                    return ret;
                }  
            };
            return ret;
        } else {
            return obj;
        }
    }
    render() {
        if (this.props.articles.length <= 0) {
            return(<div></div>);
        } else {
            let hotArticles = [];
            let backgroundImgLeft = "url("+aeroplane+")";
            let backgroundImgRight = "url("+pencil+")";
            this.props.articles.map(function(item){
                let test='<span id="article/'+item.ID+'">' + item.BodySummary +'</span>';
                let img = "url("+item.FeaturedImage+")";
                var linkTo = "article/" + item.ID;
                var commentTo = "comment/" + item.ID;
                let buttons = (<Row ><Col span={12} style={styles.articleOptionLeft} onClick={ () => {hashHistory.push(linkTo)}}>阅读全文</Col><Col span={12} style={styles.articleOptionRight} onClick={ () => {hashHistory.push(commentTo)}}>写留言</Col></Row >);
                if (item.IsCommentAllowed == false ) {
                    buttons = (<Row ><Col span={24} style={styles.articleOptionLeft} onClick={ () => {hashHistory.push(linkTo)}}>阅读全文</Col></Row >);
                }
                hotArticles.push(
                    <div key={item.ID + ''} style={styles.articleInfo} >
                        <div style={styles.articleHeader}>
                            <span style={styles.articleDate}>{item.PublishedDateString}</span>
                            <span style={styles.articleReadAndComments}>阅读&nbsp;&nbsp;{item.NumberOfRead}</span>
                            <span style={styles.articleReadAndComments}> &bull; </span>
                            <span style={styles.articleReadAndComments}>评论&nbsp;&nbsp;{item.IsCommentAllowed==false?"-":item.NumberOfComments}</span>
                        </div>
                        <div style={styles.articleTitle} onClick={ () => {hashHistory.push(linkTo)}}>
                            {item.Title}
                        </div>
                        {item.FeaturedImage && <div style={{...styles.articleImg, backgroundImage: img }} onClick={ () => {hashHistory.push(linkTo)}}/>}
                        <div>
                            <div style={{fontSize:"0.9rem",margin:"0.2rem 0.5rem 0.5rem 0.5rem", textAlign:"left", lineHeight:"1rem"}} dangerouslySetInnerHTML={{__html: test}} />
                        </div>
                        {buttons}
                    </div>);
            });
            
            return(
                <div style={styles.panel}>
                    <div style={styles.header}>
                        <span style={{...styles.articleImgLeft, backgroundImage:backgroundImgLeft}}></span>
                        最热门话题
                        <span style={{...styles.articleImgRight, backgroundImage:backgroundImgRight}}></span>
                    </div>
                    {hotArticles}
                </div>
            );
        }
    }
}